<!--
 * @Description: 发送socket的端口组件
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2020-11-02 17:15:31
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-03-14 09:54:50
-->
<template>
  <fks-dialog
    v-if="Visible"
    :visible.sync="Visible"
    width="960px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <template slot="title">
      <i class="fks-icon-edit" />
      <span>{{ LANG.TEST }}</span>
    </template>
    <fks-form ref="form" v-loading="loading" :model="form">
      <!-- 消息模板ID -->
      <!-- <fks-form-item :label="LANG.TEMPLATE_ID">
        <fks-input v-model="templateId" disabled />
      </fks-form-item> -->

      <!-- 消息模板名称 -->
      <fks-form-item :label="LANG.TEMPLATE_NAME">
        <fks-input v-model="templateInfo.templateName" disabled />
      </fks-form-item>

      <!-- 消息发送方式：站内信/邮件/短信 -->
      <fks-form-item :label="LANG.MSG_SEND_TYPE" prop="supportedMsgSendTypes">
        <fks-select
          v-model="templateInfo.supportedMsgSendTypes"
          style="width: 100%"
          disabled
        >
          <fks-option
            v-for="item in msgSendTypeList"
            :key="item.code"
            :value="item.code"
            :label="item[$lang]"
          />
        </fks-select>
      </fks-form-item>

      <!-- 站内信特有参数:客户端ID -->
      <fks-form-item
        v-if="templateInfo.supportedMsgSendTypes === MSG_SEND_TYPE_MSG"
        :label="LANG.CLIENTID"
      >
        <fks-input
          v-model="form.toClientId"
          maxlength="50"
          :placeholder="LANG.CLIENT_ID_TIP"
        />
      </fks-form-item>
      <!-- 站内信特有参数:即时消息发送方式 -->
      <!-- <fks-form-item
        v-if="templateInfo.supportedMsgSendTypes === MSG_SEND_TYPE_MSG"
        :label="LANG.IM_TYPE"
      >
        <fks-radio-group v-model="imType">
          <fks-radio
            v-for="item in imTypeList"
            :key="item.code"
            :label="item.code"
          >
            {{ item[$lang] }}
          </fks-radio>
        </fks-radio-group>
      </fks-form-item> -->

      <!-- 自定义即时消息发送方式 -->
      <fks-form-item
        v-if="templateInfo.supportedMsgSendTypes === MSG_SEND_TYPE_MSG"
        v-show="imType == IM_TYPE_CUSTOM"
        :label="LANG.MSG_TYPE"
      >
        <fks-input
          v-model="form.msgType"
          maxlength="50"
          :placeholder="LANG.MSG_TYPE_TIP"
        />
      </fks-form-item>

      <!-- 接收者 -->
      <fks-form-item
        v-show="imType != IM_TYPE_ANNOUNCEMENT"
        :label="LANG.RECEIVE_USER"
      >
        <fks-input
          v-model="form.toUsers"
          maxlength="50"
          :placeholder="receiverTip"
        />
      </fks-form-item>

      <fks-form-item :span="24" :label="LANG.PARAMS_CONTENT">
        <fks-input
          v-if="templateInfo.supportedMsgSendTypes == MSG_SEND_TYPE_SMS"
          disabled
          :value="LANG.THIRD_TEMPLATE_CONTENT"
        />
        <fks-input
          v-else
          type="textarea"
          :rows="5"
          disabled
          :value="templateInfo.template"
        />
      </fks-form-item>

      <!-- 测试参数 -->
      <fks-form-item :label="LANG.TEST_PARAMS">
        <fks-input
          v-model="form.msgTemplateParam"
          type="textarea"
          :rows="5"
          maxlength="255"
          :placeholder="LANG.TEST_PARAMS_TIP"
        />
      </fks-form-item>

      <fks-form-item class="tips">
        <div class="tips">
          {{ sendTip }}
        </div>
      </fks-form-item>
    </fks-form>

    <template slot="footer">
      <fks-button type="primary" icon="fks-icon-check" @click="postMsg">
        {{ LANG.SEND }}
      </fks-button>
    </template>
  </fks-dialog>
</template>

<script>
import { postMsg } from './api'
import { USER } from '@/store/State/stateTypes'
import { getMsgTemplateById } from '../../api'
import { ENUM } from '@/store/State/stateTypes'
import { LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'

export default {
  name: 'MsgPost',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    templateId: {
      type: String
    }
  },
  data() {
    return {
      MSG_SEND_TYPE_MSG: '0',
      MSG_SEND_TYPE_SMS: '1',
      MSG_SEND_TYPE_EMAIL: '2',

      IM_TYPE_PRIVATE: '0',
      IM_TYPE_ANNOUNCEMENT: '1',
      IM_TYPE_CUSTOM: '2',

      imType: '0',

      Visible: false,
      loading: true,

      templateInfo: {},
      form: {},
      msgTemplateParam: { text: '测试toUser', puilisher: '没有人' } //k-v值对
    }
  },
  computed: {
    client() {
      return this.latestClientConfig.clientId ?? ''
    },
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    },
    imTypeList() {
      return this.$store.state[ENUM].imType || []
    },
    msgSendTypeList() {
      return this.$store.state[ENUM].msgSendType || []
    },
    currentMsgSendTypeInfo() {
      let index = this.templateInfo?.supportedMsgSendTypes
        ? Number(this.templateInfo.supportedMsgSendTypes)
        : 0
      return this.msgSendTypeInfo[index]
    },
    msgSendTypeInfo() {
      return [
        {
          sendTip: this.LANG.TEST_TIP_MSG,
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        },
        {
          sendTip: this.LANG.TEST_TIP_SMS,
          receiverTip: this.LANG.RECEIVE_USER_TIP_SMS,
          defaultUser: this.USER.phone
        },
        {
          sendTip: this.LANG.TEST_TIP_EMAIL,
          receiverTip: this.LANG.RECEIVE_USER_TIP_EMAIL,
          defaultUser: this.USER.email
        },
        {
          sendTip: '',
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        },
        {
          sendTip: this.LANG.TEST_TIP_MSG_TYPE,
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        },
        {
          sendTip: '',
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        },
        {
          sendTip: '',
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        },
        {
          sendTip: this.LANG.TEST_TIP_MSG_TYPE,
          receiverTip: this.LANG.RECEIVE_USER_TIP_MSG,
          defaultUser: this.USER.userName
        }
      ]
    },
    sendTip() {
      return this.currentMsgSendTypeInfo.sendTip
    },
    receiverTip() {
      return this.currentMsgSendTypeInfo.receiverTip
    },
    defaultUser() {
      return this.currentMsgSendTypeInfo.defaultUser
    },
    USER() {
      return this.$store.state[USER]
    },
    msgTypes() {
      return (
        this.$store.state[ENUM].msgTypes.map((item) => {
          item.code = parseInt(item.code)
          return item
        }) || []
      )
    }
  },
  watch: {
    defaultUser(val) {
      if (val) {
        this.$set(this.form, 'toUsers', val)
      }
    },
    client(val) {
      if (val) {
        this.$set(this.form, 'toClientId', val)
      }
    },
    visible(val) {
      this.Visible = val
      if (val) {
        this.resetData()
        this.initData()
      }
    }
    // imType(val) {
    //   if (val) {
    //     let msgType = val == this.IM_TYPE_ANNOUNCEMENT ? 100 : 200
    //     this.$set(this.form, 'msgType', msgType)
    //   }
    // }
  },
  mounted() {},
  created() {},
  beforeDestroy() {},
  methods: {
    resetData() {
      this.templateInfo = {}
      this.form = {
        toClientId: this.client,
        toUsers: this.defaultUser
      }
    },

    initData() {
      this.loading = true

      getMsgTemplateById(this.templateId)
        .then((res) => {
          if (res.status) {
            this.templateInfo = res.data
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * @description: 发送消息，有些值添加默认值
     */
    postMsg() {
      let data = {
        fromClientId: this.client,
        fromTenantId: this.latestClientConfig.tenantId,
        fromUserFullname: this.USER.userFullname,
        fromUserId: this.USER.id,
        fromUserName: this.USER.userName,

        msgSendType: this.templateInfo.supportedMsgSendTypes,
        msgTemplateParam: this.form.msgTemplateParam,
        msgTemplateId: this.templateId,
        msgType: this.templateInfo.supportedMsgSendTypes === '0' ? '200' : '',
        toUsers: this.form.toUsers,
        toClientId: this.form.toClientId ?? 'fawkes'
      }
      postMsg(data)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.MSG_SEND_SUCCESS)
          }
        })
        .catch(() => {})
    },

    close() {
      this.Visible = false
      this.$emit('close')
      this.resetData()
    }
  }
}
</script>

<style scoped lang="scss">
.tips {
  font-size: 14px;
  color: #999;
}

.tips ::v-deep .fks-form-item__content {
  line-height: 16px !important;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>
